<template>
  <basic-container>
    <div class="header">
      <TitleComponent mainTitle="刷单任务" subTitle="列表" />
      <el-button text type="primary" @click="router.push('/index')">主页</el-button>
    </div>
    <div class="crud_content">
      <avue-crud :option="option"  :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
        v-model="crudData.form" @selection-change="selectionChange" @refresh-change="refreshChange"
        @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
        @size-change="sizeChange" ref="crud" @on-load="onLoad">
        <template #menu-left="{ row }">
          <el-button type="danger" icon="el-icon-delete" @click="rowDelete">批量删除
          </el-button>
          <el-button type="success" icon="el-icon-circle-check" @click="rowPass">审核成功
          </el-button>
          <el-button type="warning" icon="el-icon-circle-close" @click="rowError">审核失败
          </el-button>
        </template>
        <template #menu="{ row }">
          <el-dropdown @command="(command) => handleCommand(command, row)" v-if="row.state == '2'">
            <el-icon style="rotate: 90deg;cursor: pointer" size="20">
              <More />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="success">审核成功</el-dropdown-item>
                <el-dropdown-item command="fail">审核失败</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template #link="{ row }">
          <a :href="row.link" target="_blank"  style="color: #67C23A;">点击</a>
        </template>

        <template #state="{ row }">
          <el-tag type="danger" v-if="row.state == '4'"> 失败</el-tag>
          <el-tag type="info" v-if="row.state == '1'"> 待提交</el-tag>
          <el-tag type="primary" v-if="row.state == '2'"> 待审核</el-tag>
          <el-tag type="success" v-if="row.state == '3'"> 已完成</el-tag>
        </template>
        <!-- <template #certificate="{ row }">
          <el-image style="width: 50px;" :src="row.certificate" fit="cover" @click="openPreview(row.certificate)" />
        </template> -->
      </avue-crud>
    </div>
    <el-dialog v-model="crudData.confirmDeleteVisible" append-to-body title="" width="440" destroy-on-close center
      class="custom-dialog">
      <div class="swal2-header">
        <div class="swal2-icon swal2-question swal2-animate-question-icon"></div>
        <div class="swal2_fs">{{ crudData.confirmDeleteTitle }}？</div>
      </div>
      <div class="swal2_he">ID - {{ crudData.indexId }}</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" class="btn btn-primary" @click="handleDeleteConfirm(crudData.confirmDeleteTitle)">
            确认
          </el-button>
          <el-button class="btn" type="" @click="handleDeleteCancel">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>

  </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { getCurrentInstance, reactive, ref } from 'vue';
import { FarmingPage, FarmingRemove, FarmingAudit } from '@/api/user'
import TitleComponent from '@/components/title/index.vue';
import BasicContainer from "@/components/basic-container/main.vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";

const userStore = useUserStore();
const router = useRouter();

let option: any = reactive({
  height: 'auto',
  calcHeight: 80,
  searchShow: true,
  searchMenuSpan: 5,
  searchMenuPosition: 'right',
  tip: true,
  border: true,
  index: false,
  gridBtn: true,
  viewBtn: false,
  editBtn: false,
  delBtn: false,
  addBtn: false,
  dialogWidth: '40%',
  menuFixed: 'right',
  labelWidth: 130,
  menu: true,
  menuWidth: 100,
  selection: true,
  indexLabel: '序号',
  saveBtnText: '确定',
  refreshBtn: true, // 刷新按钮
  columnBtn: true,
  searchShowBtn: false,
  indexWidth: 60,
  align: 'center',
  column: [
    {
      label: "手机号",
      prop: "phoneNumber",
      search: true,
      span: 24,
    },
    // {
    //   label: "任务名称",
    //   prop: "taskName",
    //   search: true,
    //   span: 24,
    // },
    {
      label: "任务ID",
      prop: "taskId",
      search: true,
      span: 24,
    },
    {
      label: "链接",
      prop: "link",
      span: 24,
    },
    {
      label: "佣金",
      search: true,
      prop: "brokerage",
      span: 24,
    },
    {
      label: "状态",
      prop: "state",
      search: true,
      type: 'select',
      filters: true,
      filterMethod: function (value, row, column) {
        return row.state === value;
      },
      dicData: [
        {
          label: '失败',
          value: '4'
        },
        {
          label: '已完成',
          value: '3'
        },
        {
          label: '待审核',
          value: '2'
        },
        {
          label: '待提交',
          value: '1'
        }
      ],
      span: 24,
    },
    {
      label: "凭证",
      prop: "certificate",
      type: 'upload',
      dragFile: true,
      dataType: 'string',
      listType: 'picture-card',
      accept: 'image/png, image/jpeg',
      limit: 1,
      span: 24,
      propsHttp: {
        name: 'originalFilename',
        url: 'url',
      },
      headers: {
        Authorization: `Bearer ${userStore.token}`
      },
      tip: '只能上传jpg/png用户头像',
      action: '/prod-api/common/upload'
    },
    {
      label: "创建时间",
      prop: "createTime",
      hide: true,
      searchType: 'daterange',
      type: "daterange",
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      startPlaceholder: '开始时间',
      endPlaceholder: '结束时间',
    },
    {
      label: "创建时间",
      prop: "createTime",
      span: 24,
    },
  ]
})

let crudData: any = reactive({
  loadingSubmit: false,
  loadingSave: false,
  confirmDeleteVisible: false,
  deleteFlag: false,
  index_unit: [],
  query: {},
  selectList: [],
  loading: true,
  indexId: '',
  confirmDeleteTitle: '',
  active: 1,
  page: {
    pageSize: 10,
    currentPage: 1,
    pageSizes:[ 10, 20, 30, 40, 50, 100,1000 ]
  },
  filedArr: [],
  data: []
})
const handleCommand = (command, row) => {
  crudData.rowData = row
  if (command === 'success') {
    crudData.indexId = row.id
    crudData.confirmDeleteTitle = '确认审核成功吗'

    crudData.confirmDeleteVisible = true
  } else if (command === 'fail') {
    crudData.indexId = row.id
    crudData.confirmDeleteTitle = '确认审核失败吗'
    crudData.confirmDeleteVisible = true
  }
};

const handleClick = (row) => {
  let a = row.link
  console.log('aaaa', a);

  window.open(a, '_blank');
}

function refreshChange() {
  onLoad(crudData.page, crudData.query);
}

function searchChange(params: any, done: () => void) {
  crudData.query = params;
  crudData.page.currentPage = 1;
  onLoad(crudData.page, params);
  done();
}

function searchReset() {
  crudData.query = {};
  onLoad(crudData.page);
}

function currentChange(currentPage: any) {
  crudData.page.currentPage = currentPage;
}

function sizeChange(pageSize: any) {
  crudData.page.pageSize = pageSize;
}

function selectionChange(list) {
  crudData.selectList = list
  crudData.deleteFlag = crudData.selectList.length > 0;
}

// 根据操作的命令执行操作
function rowDelete() {
  if (crudData.selectList.length === 0) {
    ElMessage.warning('请选择要删除的数据')
    return
  }
  crudData.indexId = crudData.selectList.map(item => item.id).join(',')
  crudData.confirmDeleteTitle = '确认删除吗'
  crudData.confirmDeleteVisible = true
}

function rowPass() {
  if (crudData.selectList.length === 0) {
    ElMessage.warning('请选择要审核的数据')
    return
  }
  let filter = crudData.selectList.filter(item => item.state == '2')
  if (filter.length === 0) {
    ElMessage.warning('没有待审核的数据')
    return
  }
  crudData.indexId = filter.map(item => item.id).join(',')
  crudData.confirmDeleteTitle = '确认审核成功吗'
  crudData.confirmDeleteVisible = true
}

function rowError() {
  if (crudData.selectList.length === 0) {
    ElMessage.warning('请选择要审核的数据')
    return
  }
  let filter = crudData.selectList.filter(item => item.state == '2')
  if (filter.length === 0) {
    ElMessage.warning('没有待审核的数据')
    return
  }
  crudData.indexId = filter.map(item => item.id).join(',')
  crudData.confirmDeleteTitle = '确认审核失败吗'
  crudData.confirmDeleteVisible = true
}

function handleDeleteConfirm(tit) {
  if (tit.includes('删除')) {
    FarmingRemove(crudData.indexId).then(res => {
      ElMessage.success('操作成功')
      onLoad(crudData.page)
    }).catch(err => {
      ElMessage.error(err)
    })
  } else if (tit.includes('成功')) {
    let params = {
      ids: crudData.indexId,
      state: '3'
    }
    FarmingAudit(params).then(res => {
      ElMessage.success('操作成功')
      onLoad(crudData.page)
    }).catch(err => {
      ElMessage.error(err)
    })
  } else if (tit.includes('失败')) {
    let params = {
      ids: crudData.indexId,
      state: '4'
    }
    FarmingAudit(params).then(res => {
      ElMessage.success('操作成功')
      onLoad(crudData.page)
    }).catch(err => {
      ElMessage.error(err)
    })
  }
  crudData.confirmDeleteVisible = false
}

function handleDeleteCancel() {
  crudData.confirmDeleteVisible = false
}

// 处理批量审核
const crud = ref();

const onLoad = (page: any, params = {}) => {
  crudData.loading = true;
  FarmingPage(page.currentPage, page.pageSize, Object.assign(params, crudData.query)).then((res: any) => {
    const Data = res.data;
    crudData.page.total = Data.total;
    crudData.data = Data.records;
    crudData.loading = false;
  });
}

</script>
<style scoped lang="scss">
::v-deep .avue-crud__img {
  width: 50px;
  height: 70px;
  display: block;
  margin: auto;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

::v-deep .avue-crud__left {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2%;
}

.crud_content {
  width: 100%;
}

.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swal2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swal2-icon {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  zoom: normal;
  border: 0.25em solid transparent;
  border-radius: 50%;
  line-height: 5em;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.swal2-icon.swal2-question::before {
  content: "?";
}

.swal2-icon::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92%;
  font-size: 3.75em;
}

.swal2-icon.swal2-question {
  border-color: #c9dae1;
  color: #87adbd;
}

.swal2_fs {
  margin: 0 0 0.4em;
  padding: 0;
  font-size: 25px;
  color: #595959;
  text-align: center;
  font-weight: 400 !important;
}

.swal2_he {
  text-align: center;
  color: #545454;
  font-size: 1.125em;
  font-weight: 300;
  line-height: normal;
  word-wrap: break-word;
}

.btn {
  padding: 0.54rem 1.2rem !important;
  height: 34px;
  line-height: 1.2;
  border-radius: 0.2rem;
  cursor: pointer;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.065),
    0 2px 2px 0 rgba(0, 0, 0, 0.065), 0 1px 5px 1px rgba(0, 0, 0, 0.065);
}

.btn-primary {
  color: #fff;
  background-color: #4e9876;
  border-color: #4e9876;
}
</style>
